<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123"  v-model="obj.name" /></p>
            <p>年龄<input id="age" type="text" value="21" v-model="obj.age" /></p>
            <p>性别
                <select id="gender" v-model="obj.gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" @click="add" />
                <input type="button" value="排序" id="sortBtn" @click="sort()" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- 表身---------------------------------------------- -->
            <tbody>
                <tr v-for="(item,key) in arr">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                    <td @click="dele(key)">删除</td>
                </tr>
            </tbody>

        </table>
    </div>

    <script>

        let vm = new Vue({
            el: ".wrap",
            data: {
                arr: [
                    // {
                    //     name: "徐宇航",
                    //     age: 24,
                    //     gender: "男"
                    // },
                    // {
                    //     name: "陈双双",
                    //     age: 23,
                    //     gender: "女"
                    // },
                    // {
                    //     name: "郭天睿",
                    //     age: 30,
                    //     gender: "男"
                    // },
                    // {
                    //     name: "李梓涵",
                    //     age: 27,
                    //     gender: "女"
                    // },
                ],

                obj:{
                    name:"",
                    age:"",
                    grnder:"",
                },

            },
            methods: {
                dele(key) {
                    this.arr.splice(key, 1);
                },
                sort() {
                    this.arr.sort((a, b) => a.age - b.age);
                },
                add() {
                    let newobj = {
                        name: this.obj.name,
                        age: this.obj.age,
                        gender: this.obj.gender,
                    }
                    this.arr.push(newobj);

                    // this.arr.push(this.obj);
                },
            }

        })



        // // 复习 
        // // 1.学生系统  2.有3张图片一个按钮 点击按钮的时候随机显示一张图片
        // var usernameEle = document.querySelector("#username");
        // var ageEle = document.querySelector("#age");
        // var genderEle = document.querySelector("#gender");
        // var btnEle = document.querySelector("#addBtn");
        // var tbody = document.querySelector("tbody");

        // btnEle.onclick = function () {
        //     var username = usernameEle.value;
        //     var age = ageEle.value;
        //     var gender = genderEle.value;
        //     var trEle = document.createElement("tr");
        //     trEle.innerHTML = `<td>${username}</td>
        //                         <td>${age}</td>
        //                         <td>${gender}</td>
        //                         <td class='del'>删除</td>`;
        //     //  var delEle =  trEle.querySelector(".del");
        //     //  delEle.onclick = function(){
        //     //     //  console.log(this);
        //     //     this.parentElement.remove();
        //     //  }
        //     tbody.appendChild(trEle);
        //     addEvent()
        // }

        // // 一刷新页面的时候就执行了
        // // console.log(111);
        // function addEvent() {
        //     var dels = document.querySelectorAll(".del");
        //     dels.forEach(function (item) {
        //         item.onclick = function () {
        //             // console.log(111);
        //             this.parentElement.remove();
        //         }
        //     })
        // }

    </script>
</body>

</html>